<script setup>
import {message} from 'ant-design-vue'
import {defineProps, ref} from 'vue'
import {token, user} from '~/logic'
import {sendSmsCode} from '~/logic/apis/tool'
import * as UserApi from '~/logic/apis/user'
import {accountLogin, smsLogin} from '~/logic/apis/user'

const props = defineProps({
  loginVisible: {
    default: false,
  },
})
const emit = defineEmits(['close', 'update:loginVisible'])
const loginType = ref(1)
const user_mobile = ref('')
const user_password = ref('')
const code = ref('')
const visible = ref(false)
const loginLoading = ref(false)
const countdown = ref(0)
const userInfo = () => {
  UserApi.info().then((res) => {
    if (res.data.status) {
      user.value = res.data.data
    }
  })
}
const sendCode = () => {
  if (user_mobile.value === '') {
    message.error('请输入手机号!')
  } else {
    sendSmsCode(user_mobile.value).then((res) => {
      console.log('res',res);
      if (res && res.status) {
        message.success(res.data.msg)
        countdown.value = 60
        const timer = setInterval(() => {
          countdown.value--
          if (countdown.value === 0) {
            clearInterval(timer)
          }
        }, 1000)
      } else {
        message.error(res.data.msg)
      }
    })
  }
}
watch(() => props.loginVisible, (status) => {
  visible.value = status
})
const toLogin = () => {
  if (user_mobile.value === '') {
    message.error('请输入手机号!')
    return
  }
  if (loginType.value === 1) {
    if (code.value === '') {
      message.error('请输入验证码!')
      return
    }
    loginLoading.value = true
    smsLogin(user_mobile.value, code.value).then((res) => {
      if (res.data.status) {
        token.value = res.data.data.token
        message.success(res.data.msg)
        emit('close')
        emit('update:loginVisible', false)
        nextTick(() => {
          userInfo()
        })
      } else {
        message.error(res.data.msg)
      }
    }).finally(() => {
      loginLoading.value = false
      countdown.value = 0
    })
  } else {
    if (user_password.value === '') {
      message.error('请输入密码!')
      return
    }
    loginLoading.value = true
    accountLogin(user_mobile.value, user_password.value).then((res) => {
      if (res.data.status) {
        token.value = res.data.data.token
        message.success(res.data.msg)
        emit('close')
        emit('update:loginVisible', false)
        nextTick(() => {
          userInfo()
        })
      } else {
        message.error(res.data.msg)
      }
    }).finally(() => {
      loginLoading.value = false
      countdown.value = 0
    })
  }
}
const close = () => {
  emit('update:loginVisible', false)
  emit('close');
}
</script>

<template>
  <a-modal
      v-model:visible="visible" :width="380" title="星察数据" :footer="false"
      @close="close"
      @cancel="close"
  >
    <div style="text-align: center;font-size: 16px;padding-bottom: 20px;font-weight: 700;">
      {{ loginType === 1 ? '短信验证码登录' : '账号密码登录' }}
    </div>
    <a-form>
      <a-form-item v-if="loginType === 1">
        <a-input v-model:value="user_mobile" placeholder="请输入手机号(未注册自动注册)"/>
      </a-form-item>
      <a-form-item v-if="loginType === 1">
        <a-row type="flex">
          <a-col flex="1">
            <a-input v-model:value="code" placeholder="请输入验证码"/>
          </a-col>
          <a-button
              type="primary" style="width: 100px;margin-left: 10px;" :disabled="countdown > 0"
              @click="sendCode"
          >
            {{ countdown > 0 ? `${countdown}秒` : '获取验证码' }}
          </a-button>
        </a-row>
      </a-form-item>
      <a-form-item v-if="loginType === 2">
        <a-input v-model:value="user_mobile" placeholder="请输入手机号"/>
      </a-form-item>
      <a-form-item v-if="loginType === 2">
        <a-input v-model:value="user_password" type="password" placeholder="请输入密码"/>
      </a-form-item>
      <a-form-item style="margin-bottom: 10px;margin-top: -10px;">
        <a-row type="flex">
          <a-col>
            <a-button
                style="margin-left: -10px;"
                type="link" @click="() => {
                if (loginType === 1){
                  loginType = 2;
                }
                else {
                  loginType = 1;
                }
              }"
            >
              {{ loginType === 1 ? '账号密码登录' : '短信验证码登录' }}
            </a-button>
          </a-col>
          <a-col flex="1"/>
          <a-col>
            <a-button type="link" style="margin-right: -10px;">
              找回密码
            </a-button>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-button :loading="loginLoading" type="primary" style="width: 100%;" @click="toLogin">
          登录
        </a-button>
      </a-form-item>
    </a-form>
    <div style="text-align: center;font-size: 12px;">
      一个账号可以多店使用
    </div>
  </a-modal>
</template>

<style scoped>

</style>
